<template>
	<!-- 推广码 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="推广码" />
		<view class="promotion">
			<image src="/static/images/mine/promotionCodeBg.png" mode="aspectFill" class="bg"></image>
			<view class="user">
				<image :src="avatar" class="user_avatar"></image>
				<view class="user_info">
					<view class="user_info_nickname">{{user_name}}</view>
					<view class="user_info_desc">邀您一起来抽盲盒大奖啦~</view>
				</view>
			</view>
			<image :src="qr_img" class="code"></image>
			<view class="share" @click="showShare=true">分享给好友</view>
			<view class="rule" @click="showRule">推广规则</view>
			<overlay title="推广规则" :content="share_rule" ref="overlay" />
			<!-- 分享弹框 -->
			<u-popup v-model="showShare" mode="bottom" border-radius="36" :mask-close-able="false">
				<view class="sharepop">
					<view class="sharepop_title">
						<text>推荐好友一起来玩盲盒吗</text>
						<text @click="showShare=false">X</text>
					</view>
					<view class="sharepop_main">
						<view class="sharepop_main_item" @click="share('WXSceneSession')">
							<image src="/static/images/mine/wechat.png"></image>
							<text>微信好友</text>
						</view>
						<view class="sharepop_main_item" @click="share('WXSceneTimeline')">
							<image src="/static/images/mine/WXSenceTimeline.png"></image>
							<text>朋友圈</text>
						</view>
						<view class="sharepop_main_item" @click="savePhoto">
							<view class="sharepop_main_item_icon">
								<image src="/static/images/mine/down_white.png" class="down"></image>
							</view>
							<text>保存至相册</text>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<canvas :style="{width:canvasWidth+'px',height:canvasHeight+'px'}" style="position:absolute;top:-9999px;left:-9999px;" canvas-id="myCanvas" />
<!-- 		<image :src="posterImg" mode="" v-show="posterImg!=''" style="width: 750rpx;height: 1316rpx;"></image> -->
	</view>
</template>

<script>
	import overlay from '@/components/overlay'
	export default {
		components:{
			overlay
		},
		data() {
			return {
				user_name:'',
				avatar:'',
				qr_img:'',//推广二维码
				invite_code:'',//推广码
				share_rule:'',//推广规则
				bg:'/static/images/mine/promotionCodeBg.png',
				posterImg:'',//推广海报
				showShare:false,//显示分享
				canvasWidth: '',
				canvasHeight: ''
			}
		},
		onLoad() {
			this.getPromotioninfo();
			this.getSharerule();
		},
		methods: {
			//获取推广信息
			getPromotioninfo(){
				this.$api.sharecreateposter().then(res=>{
					this.user_name = res.user_name;
					this.avatar = res.avatar;
					this.qr_img = res.qr_img;
					this.invite_code = res.invite_code;
				})
			},
			//获取推广规则
			getSharerule(){
				this.$api.share_rule().then(res=>{
					this.share_rule = res;
				})
			},
			//显示推广规则
			showRule(){
				this.$refs.overlay.show();
			},
			//分享
			share(scene) {
				console.log(scene);
				this.createPoster().then(posterRes=>{
					uni.hideLoading();
					this.showShare = false;
					uni.share({
						provider: "weixin",
						scene,
						type: 0,
						href: `http://mh.mytshop.cn/app/app/#/pages/login/login?invite_code=${this.invite_code}`,
						title: "邀您一起来抽盲盒大奖啦~",
						summary: "邀请好友扫码下载成功注册即可获得现金大红包",
						imageUrl: posterRes,
						success: (res) => {
							console.log("success:" + JSON.stringify(res));
							this.$api.membershare().then(res=>{
								console.log('分享次数加一');
							})
						},
						fail: (err) => {
							console.log("fail:" + JSON.stringify(err));
						}
					});
				})
			},
			// 保存图片到相册
			savePhoto(){
				this.createPoster().then(posterRes=>{
					this.showShare = false;
					uni.saveImageToPhotosAlbum({
						filePath: this.posterImg,
						success: (res) => {
							uni.hideLoading();
							uni.showToast({
								title: "图片保存成功"
							})
						},
						fail:(err) => {
							uni.hideLoading();
							uni.showModal({
								title: '图片保存失败',
								content: '请确认是否已开启授权',
								showCancel: false
							})
						}
					})
				})
			},
			// 生成海报
			createPoster() {
				return new Promise((resolve,reject)=>{
					uni.showLoading({
						title: '合成中...'
					})
					// 创建画布对象
					const ctx = uni.createCanvasContext("myCanvas")
					// 获取图片信息，要按照原图来绘制，否则图片会变形 
					uni.getImageInfo({
						src: this.bg,
						success: (res) => {
							// 根据 图片的大小 绘制底图 的大小
							console.log(" 绘制底图的图片信息", res)
							// let imgW = res.width
							// let imgH = res.height
							let imgW = 750;
							let imgH = 1136;
							let imgPath = res.path;
							this.canvasHeight = imgH;
							this.canvasWidth = imgW;
							// 绘制底图 用原图的宽高比绘制
							ctx.drawImage(imgPath, 0, 0, imgW, imgH)
							
							uni.getImageInfo({
								src: this.qr_img, // 二维码图片的路径
								success: (res) => {
									console.log("绘制二维码", res)
									// 绘制二维码
									ctx.drawImage(res.path, 308, 268, 136, 136)
									uni.getImageInfo({
										src: this.avatar, // 用户头像的路径
										success: (avatar) => {
											console.log("绘制头像", res)
											// 绘制头像
											ctx.save()
											ctx.beginPath()
											ctx.arc(226, 91, 51, 0, 2 * Math.PI)
											ctx.clip()
											ctx.drawImage(avatar.path, 175, 40, 102, 102)
											ctx.restore()
											//绘制昵称
											ctx.setFontSize(30)
											ctx.setFillStyle('#fff')
											ctx.fillText(this.user_name, 295, 72)
											//绘制提示信息
											ctx.setFontSize(24)
											ctx.setFillStyle('#fff')
											ctx.fillText('邀您一起来抽盲盒大奖啦~', 294, 121)
											ctx.draw(false,()=>{
												uni.showLoading({
													title: '正在保存...'
												})
												setTimeout(() => {
													uni.canvasToTempFilePath({
														canvasId: 'myCanvas',
														success: (res) => {
															console.log("合成的带有小程序码的图片的信息",res)
															this.posterImg = res.tempFilePath;
															resolve(res.tempFilePath)
														},
														fail: (res) => {
															console.log("生成图片失败",res)
															uni.hideLoading()
															uni.showModal({
																title: '温馨提示',
																content: '图片合成失败，请重试',
																showCancel: false
															})
														}
													})
												}, 1500)
											})
										},
										fail(err) {
											uni.hideLoading()
											uni.showModal({
												title: '温馨提示',
												content: '图片信息获取失败，请重试',
												showCancel: false
											})
										}
									})
								},
								fail(res) {
									uni.hideLoading()
									uni.showModal({
										title: '温馨提示',
										content: '二维码获取失败，请重试',
										showCancel: false
									})
								}
							})
						},
						fail(res) {
							uni.hideLoading()
							uni.showModal({
								title: '温馨提示',
								content: '图片信息获取失败，请重试',
								showCancel: false
							})
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	padding-top: calc(var(--status-bar-height) + 100rpx);
}
.promotion{
	position: relative;
	
	.bg{
		width: 750rpx;
		height: 1136rpx;
		position: absolute;
	}
	.user{
		@include align-center;
		position: absolute;
		left: 175rpx;
		top: 40rpx;
		
		&_avatar{
			width: 102rpx;
			height: 102rpx;
			border-radius: 50%;
		}
		&_info{
			margin-left: 20rpx;
			
			&_nickname{
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-shadow: 0 1rpx 0 #000000;
			}
			&_desc{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				text-shadow: 0 1rpx 0 #000000;
			}
		}
	}
	.code{
		width: 136rpx;
		height: 136rpx;
		position: absolute;
		left: 308rpx;
		top: 268rpx;
	}
	.share{
		width: 152rpx;
		height: 50rpx;
		background-color: #FFFFFF;
		opacity: 0.6;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FF6408;
		border-radius: 25rpx 0 0 25rpx;
		@include center;
		position: absolute;
		right: 0;
		top: 183rpx;
	}
	.rule{
		width: 152rpx;
		height: 50rpx;
		background-color: #FFFFFF;
		border-radius: 25rpx 0 0 25rpx;
		opacity: 0.6;
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FF6408;
		@include center;
		position: absolute;
		right: 0;
		top: 259rpx;
	}
}
.sharepop{
	width: 750rpx;
	padding: 50rpx 30rpx;
	
	&_title{
		@include between;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: bold;
		color: #333333;
	}
	&_main{
		@include between;
		padding: 0 80rpx;
		margin-top: 50rpx;
		
		&_item{
			@include column-center;
			
			image{
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
			}
			text{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-top: 20rpx;
			}
			&_icon{
				width: 90rpx;
				height: 90rpx;
				background-color: #FF6508;
				border-radius: 50%;
			}
			.down{
				transform: scale(0.8);
			}
		}
	}
}
</style>
